<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 4.制作4个嵌套DIV ，要求：
		      1.每个父DIV尺寸必须大于子DIV
		      2.实现每个DIV在父DIV正中间
		      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
		      4.通过最底层DIV，打印每层父DIV，如：
			1级父元素为（），1级父节点为（）
			2级父元素为（），2级父节点为（）
			.... -->
			<style type="text/css">
				#div1{
					width: 500px;
					height: 500px;
					background-color: aqua;
				}
				#div2{
					width: 300px;
					height: 300px;
					background-color:blueviolet;
					}
				#div3{
						width: 200px;
						height: 200px;
						background-color:brown;
						}
						#div4{
								width: 100px;
								height: 100px;
								background-color:sandybrown;
								}
			</style>
	</head>
	<body>
		<div id="div1">
			第一个div
			<p>苹果</p>
			<div id="div2">
				第二个div
				<ul>
					<li>恒大华府</li>
				</ul>
				<div id="div3">
					第三个div
					<a href="https//www.baidu.com">跳转百度</a>
					<div id="div4">
						第四个div
						<p>牛奶</p>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	// 4.通过最底层DIV，打印每层父DIV，如：
	// 1级父元素为（），1级父节点为（）
	// 2级父元素为（），2级父节点为（）
	// 第四层div的父节点
		var div4obj=document.getElementById('div4')
		console.log(div4obj.parentElement)
		console.log(div4obj.parentNode)
     //2级父节点为
		var div3obj=document.getElementById('div3')
		// 2级父元素为
		console.log(div3.parentElement)
		console.log(div3obj.parentNode)
    // 1级父节点为
			var div1obj=document.getElementById('div1')
			// 1级父元素为
			console.log(div1.parentElement)
		
		  console.log(div1obj.children)
		  console.log(div1obj.childNodes)
	</script>
</html>
